<template>
  <div class="bigdata flex-col">
    <Header></Header>
    <div class="flex-1 content flex-row bigdata_body">
      <div class="flex-1 flex-col">
        <div class="box flex-1">
          <div class="bd flex-col justify-center" style="height: 100%">
            <div class="hd">
              <div class="title">
                <img src="./static/bigdata/today.png" alt="" />
              </div>
            </div>
            <div class="flex-1 flex-col justify-center">
              <div class="flex-row justify-center">
                <div class="flex-1 flex-row align-center justify-center">
                  <div class="dh flex-col align-center justify-center">
                    <div style="text-align: center" class="flex-col">
                      {{ Math.floor((pie_data.dh / pie_data.total) * 100) }}%
                      <img src="./static/bigdata/zhzy.png" alt="" />
                    </div>
                  </div>
                </div>
                <div
                  id="pieChart"
                  ref="pieChart"
                  style="width: 200px; height: 160px"
                ></div>
                <div class="flex-1 flex-row align-center justify-center">
                  <div class="dh flex-col align-center justify-center">
                    <div style="text-align: center" class="flex-col">
                      {{ Math.floor((pie_data.xj / pie_data.total) * 100) }}%
                      <img src="./static/bigdata/xjzy.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="today_content">
                <div class="flex-row">
                  <div
                    class="today_item flex-1 flex-col align-center justify-center"
                  >
                    <div class="four flex-row align-center justify-center">
                      <div
                        class="four_item flex-row align-center justify-center"
                      >
                        {{ pie_data.total }}
                      </div>
                    </div>
                    <div>总作业数</div>
                  </div>
                  <div
                    class="today_item flex-1 flex-col align-center justify-center"
                  >
                    <div class="four flex-row align-center justify-center">
                      <div
                        class="four_item flex-row align-center justify-center"
                        style="color: #10cbf9"
                      >
                        {{ pie_data.dh }}
                      </div>
                    </div>
                    <div>动火作业数</div>
                  </div>
                  <div
                    class="today_item flex-1 flex-col align-center justify-center"
                  >
                    <div class="four flex-row align-center justify-center">
                      <div
                        class="four_item flex-row align-center justify-center"
                        style="color: #fecd2d"
                      >
                        {{ pie_data.xj }}
                      </div>
                    </div>
                    <div>巡检作业数</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-row">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div>
        <div class="box" style="height:400px;">
          <div class="bd flex-col"  style="height:380px">
            <div class="hd flex-row">
              <div class="title">
                <img src="./static/bigdata/warning.png" alt="" />
              </div>
              <div class="flex-1"></div>
              <div class="flex-row align-center" style="margin-right: 10px">
                <div class="time flex-1"></div>
                <div class="line" style="width: 20px; padding: 0 10px"></div>
                <div class="time flex-1"></div>
              </div>
              <div class="block flex-row align-center">
                <div>统计周期</div>
                <el-date-picker
                  class="flex-1"
                  v-model="value1"
                  type="monthrange"
                  range-separator=""
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  @blur="zqblur"
                  value-format="yyyy-MM"
                >
                </el-date-picker>
              </div>
            </div>
            <div style="height:310px">
              <!-- 柱状图、折线图 -->
              <div id="lineChart" style="height: 310px; width: 100%"></div>
            </div>
            <div class="flex-row">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1"></div>
              <div style="z-index:999"><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div>
        <!-- <div class="flex-1 box">
          <div class="bd flex-col">
            <div class="hd flex-row">
              <div class="title">
                <img src="./static/bigdata/evening.png" alt="" />
              </div>
              <div class="flex-1"></div>
              <div
                class="title"
                style="padding-right: 18px; margin-top: -13px; cursor: pointer" @click="$router.push({ path: '/warnManage/warnlist'})"
              >
                <img src="./static/bigdata/more.png" alt="" />
              </div>
            </div>
            <div class="st">
              <div class="warn_list" v-if="warning_list && warning_list.length>0">
                <div
                  class="warn_item flex-row"
                  v-for="(item, index) in warning_list"
                  :key="index"
                >
                  <div class="flex-col flex-1">
                    <div class="warn_title el">
                      {{ item.group_title }}/{{ item.warning_type_title }}
                    </div>
                    <div class="warn_des el">{{ item.content }}</div>
                  </div>
                  <div class="flex-col" style="text-align: right">
                    <div class="warn_time">{{ item.updated_at }}</div>
                    <div class="flex-row">
                      <div class="flex-1"></div>
                      <div
                        class="warn_state"
                        v-if="item.status == 10"
                        style="background: #d6fff0; color: #3ad68a"
                      >
                        已处理
                      </div>
                      <div
                        class="warn_state"
                        v-if="item.status == 20"
                        style="
                          background: rgba(240, 173, 78, 0.3);
                          color: rgba(240, 173, 78, 1);
                        "
                      >
                        处理中
                      </div>
                      <div class="warn_state" v-if="item.status == 30">
                        待处理
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <nodata v-if="warning_list==0" />
            </div>
            <div class="flex-row">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div> -->
      </div>
      <div class="flex-col map_size" :class="{'show_map':num.bk == 0}">
        <div class="box cg" v-if="num.bk != 0">
          <div class="bd flex-col" style="height: 100%">
            <div class="hd flex-row align-center">
              <div class="title">
                <img src="./static/bigdata/map.png" alt="" />
              </div>
              <div class="flex-1"></div>
              <div class="flex-row align-center" style="margin-right: 10px">
                <div class="time flex-1"></div>
              </div>
              <div class="block flex-row align-center" style="margin-right:58px;">
                <div>选择区域</div>
                <el-select v-model="value" placeholder="请选择" @change="changeArea" style="width:120px">
                    <el-option
                      v-for="(item, index) in area_list"
                      :key="index"
                      :label="item.title"
                      :value="item.id">
                    </el-option>
                  </el-select>
              </div>
              <div></div>
              <div class="title">
                <img
                  style="padding-right: 34px"
                  src="./static/bigdata/map_type.png"
                  alt=""
                />
              </div>
            </div>
            <div class="flex-1 flex-row align-center justify-center" style=" overflow:hidden">
                <!-- 储罐地图 -->
                <!-- <div style="width:100%; height:100%;" >
                    <img :src="bg_img" style="width:100%; height:100%" alt="">
                </div>
                image_url -->
                <div class="cont" style="width:728px; height:490px; ">
                  <img id="img" style="width:100%; height:100%;" :src="bg_img" alt="">
                  <canvas ref="markCanvas" tabindex='0'></canvas>
                </div>

            </div>
            <div class="flex-row align-center">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div>
        <div class="flex-1 box">
          <div class="bd flex-col">
            <div class="hd flex-row">
              <div class="title">
                <img src="./static/bigdata/evening.png" alt="" />
              </div>
              <div class="flex-1"></div>
              <div
                class="title"
                style="padding-right: 18px; cursor: pointer" @click="$router.push({ path: '/warnManage/warnlist'})"
              >
                <img src="./static/bigdata/more.png" alt="" />
              </div>
            </div>
            <div class="st">
              <div class="warn_list"  :class="{'no_data':num.bk == 0}" v-if="warning_list && warning_list.length>0">
                <div
                  class="warn_item flex-row"
                  v-for="(item, index) in warning_list"
                  :key="index"
                >
                  <div class="flex-col flex-1">
                    <div class="warn_title el">
                      {{ item.group_title }}/{{ item.warning_type_title }}
                    </div>
                    <div class="warn_des el">{{ item.content }}</div>
                  </div>
                  <div class="flex-col" style="text-align: right">
                    <div class="warn_time">{{ item.updated_at }}</div>
                    <div class="flex-row">
                      <div class="flex-1"></div>
                      <div
                        class="warn_state"
                        v-if="item.status == 10"
                        style="background: #d6fff0; color: #3ad68a"
                      >
                        已处理
                      </div>
                      <div
                        class="warn_state"
                        v-if="item.status == 20"
                        style="
                          background: rgba(240, 173, 78, 0.3);
                          color: rgba(240, 173, 78, 1);
                        "
                      >
                        处理中
                      </div>
                      <div class="warn_state" v-if="item.status == 30">
                        待处理
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <nodata v-if="warning_list==0" />
            </div>
            <div class="flex-row">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 flex-col" v-if="num.bk != 0">
        <div class="box" >
          <div class="bd flex-col" style="height: 100%">
            <div class="hd">
              <div class="title">
                <img src="./static/bigdata/ck.png" alt="" />
              </div>
            </div>
            <div class="flex-1">
              <div class="ck">
                <div class="flex-row align-center ck_top">
                  <div class="flex-row flex-1 justify-center align-center">
                    <img
                      class="ck_img"
                      src="./static/bigdata/num_total.png"
                      alt=""
                    /><span class="ck_num" style="color: #6ce0f6;">{{storage_hatch_num.total}}</span>
                  </div>
                  <div class="flex-row flex-1 justify-center align-center">
                    <img
                      class="ck_img"
                      src="./static/bigdata/num_end.png"
                      alt=""
                    /><span class="ck_num" style="color: #00ffb4">{{storage_hatch_num.success}}</span>
                  </div>
                  <div class="flex-row flex-1 justify-center align-center">
                    <img
                      class="ck_img"
                      src="./static/bigdata/num_warn.png"
                      alt=""
                    /><span class="ck_num" style="color: #f9f60e">{{storage_hatch_num.error}}</span>
                  </div>
                </div>
                <div class="ck_content">
                  <el-row v-if="storage_hatch.list && storage_hatch.list.length>0">
                    <el-col :span="6" v-for="(item,index) in storage_hatch.list" :key="index" >
                      <div class="ck_bg1 flex-row align-center justify-center" @click="hatchItem(item)">
                        <img v-if="item.is_polling==30" src="./static/bigdata/bg_total.png" alt="" />
                        <img v-if="item.is_polling==20" src="./static/bigdata/bg_warn.png" alt="" />
                        <img v-if="item.is_polling==10" src="./static/bigdata/bg_end.png" alt="" />
                        <span
                          class="img_num"
                          >{{item.code}}</span
                        >
                      </div>
                    </el-col>
                  </el-row>
                  <nodata v-if="storage_hatch.list == 0"></nodata>
                </div>
              </div>
            </div>
            <div class="flex-row">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1 flex-row">
                <div class="flex-1"></div>
                <div></div>
              </div>
              <div><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="bd flex-col" style="height: 100%">
            <div class="hd">
              <div class="title">
                <img src="./static/bigdata/zq.png" alt="" />
              </div>
            </div>
            <div class="flex-1 zq_content flex-col">
              <div class="flex-1 flex-row align-center justify-center">
                <div
                  class="flex-1 zq_left flex-col align-center justify-center"
                >
                  <div>
                    <el-progress
                      class="progress"
                      type="circle"
                      :percentage="storage_percent.percent"
                      :stroke-width="16"
                      color="#8075fd"
                    ></el-progress>
                  </div>
                  <div
                    class="four flex-row align-center justify-center"
                    style="margin-top: 20px"
                  >
                    <div
                      class="four_item flex-row align-center justify-center"
                      style="font-size: 16px; height: 45px"
                    >
                      已巡检占比
                    </div>
                  </div>
                </div>
                <div class="zq_list">
                  <div class="zq_item flex-row align-center justify-center">
                    <div class="flex-col">
                      <div>储罐总数量</div>
                      <div>
                        <img src="./static/bigdata/look_dian.png" alt="" />
                      </div>
                    </div>
                    <div class="look_num flex-row align-center justify-center">
                      {{storage_percent_num.storage_total}}
                    </div>
                  </div>
                  <div class="zq_item flex-row align-center justify-center">
                    <div class="flex-col">
                      <div>舱口总数量</div>
                      <div>
                        <img src="./static/bigdata/look_dian.png" alt="" />
                      </div>
                    </div>
                    <div class="look_num flex-row align-center justify-center">
                        {{storage_percent_num.hatch_total}}
                    </div>
                  </div>
                  <div class="zq_item flex-row align-center justify-center">
                    <div class="flex-col">
                      <div>已巡储罐</div>
                      <div>
                        <img src="./static/bigdata/look_dian.png" alt="" />
                      </div>
                    </div>
                    <div class="look_num flex-row align-center justify-center">
                        {{storage_percent_num.storage_polling}}
                    </div>
                  </div>
                  <div class="zq_item flex-row align-center justify-center">
                    <div class="flex-col">
                      <div>已巡舱口</div>
                      <div>
                        <img src="./static/bigdata/look_dian.png" alt="" />
                      </div>
                    </div>
                    <div class="look_num flex-row align-center justify-center">
                        {{storage_percent_num.hatch_polling}}
                    </div>
                  </div>
                  <div class="zq_item flex-row align-center justify-center">
                    <div class="flex-col">
                      <div>异常舱口</div>
                      <div>
                        <img src="./static/bigdata/look_dian.png" alt="" />
                      </div>
                    </div>
                    <div class="look_num flex-row align-center justify-center">
                        {{storage_percent_num.hatch_error}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-row">
              <div>
                <img
                  src="./static/bigdata/right.png"
                  class="rotate-180"
                  alt=""
                />
              </div>
              <div class="flex-1"></div>
              <div><img src="./static/bigdata/right.png" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <el-dialog :visible.sync="dialogVisible" width="520px" :append-to-body="true" class="comDialog">
        <div class="content">
            <div class="flex-row header align-center ">
                <div class="title flex-1">设备信息弹窗</div>
                <div style="cursor: pointer;" @click="dialogVisible = false"><img style="padding-right:10px;" src="./static/bigdata/close.png" alt=""></div>
            </div>
            <div class="body">
                <div class="b_content flex-col">
                    <div class="flex-row item name"><img src="./static/bigdata/book.png" style="padding-right:5px;" alt="">{{dialogInfo.title}}/{{dialogInfo.group_title}}</div>
                    <div class="flex-row item">设备：{{dialogInfo.is_online == 20 ? '离线' : '在线'}}</div>
                    <div class="flex-row item">电量：{{dialogInfo.yaw}}%</div>
                    <!-- <div class="flex-row item">位置：{{dialogInfo.position}}</div> -->

                </div>
               <div style="width:100%;" class="flex-row align-center justify-center">
                <span slot="footer" class="dialog-footer flex-row " >
                    <el-button v-if="showInfo" class="colorBtn big flex-1" type="primary" @click="gotoInfo(dialogInfo.id)">查看详情</el-button>
                    <el-button class="colorBtn big flex-1 ghost" @click="dialogVisible = false">取 消</el-button>
                    </span>
               </div>
            </div>
        </div>
      </el-dialog>
       <!-- 回放 -->
    <el-dialog :visible.sync="replayVisible" width="920px" :append-to-body="true" class="comDialog">
      <div class="content">
          <div class="flex-row header align-center ">
              <div class="title flex-1">回放</div>
              <div style="cursor: pointer;" @click="replayVisible = false"><img style="padding-right:10px;" src="./static/bigdata/close.png" alt=""></div>
          </div>
          <div class="body">
             <div style="width:100%;" class="flex-row align-center justify-center">
                <JessibucaDemo v-if="replayVisible" :control_Btn="false" :screen_width="900" :screen_height="450" :videoUrl="replayContent" :stop_video="false"/>
                <!-- <div style="color: #fff;" class="" v-if="!replayContent">暂无数据</div> -->
              </div>
          </div>
      </div>
    </el-dialog>
           <!-- 回放列表 -->
           <el-dialog :visible.sync="backVisibleFrom.visible" width="700px" :append-to-body="true" class="comDialog">
      <div class="content">
          <div class="flex-row header align-center ">
              <div class="title flex-1">回放列表</div>
              <div style="cursor: pointer;" @click="backVisibleFrom.visible = false"><img style="padding-right:10px;" src="./static/bigdata/close.png" alt=""></div>
          </div>
          <div class="body backBody" style="padding-bottom: 20px;">
            <div class="block">
                <span class="demonstration" style="padding-right:10px">查看周期</span>
                <el-date-picker
                  v-model="timeValue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @change="changeData"
                  >
                </el-date-picker>
              </div>
             <div style="width:100%;" class="flex-row align-center justify-center">
              <div v-if="backList && backList.length>0" style="width:100%;padding-bottom: 20px;">
                <div v-for="(item, index) in backList" :key="index" style="width:100%">
                  <div class="flex-row backItem" style="width:100%">
                    <div class="flex-1">{{item.show_time}}</div>
                    <div @click="replayVisible=true,replayContent = item.file_url" style="cursor: pointer;">查看回放</div>
                  </div>
                </div>
              </div>
              <div style="color: #fff; padding: 50px 0;" class="" v-if="backList.length == 0">暂无数据</div>
              </div>
              <pagination v-show="backVisibleFrom.total > 0" :total="backVisibleFrom.total" :page.sync="backVisibleFrom.page" :limit.sync="backVisibleFrom.pageSize"
      @pagination="getList" />
             <!-- <div style="width:100%; margin-top:20px" class="flex-row align-center justify-center">
              <span slot="footer" class="dialog-footer flex-row " >
                  <el-button class="colorBtn big flex-1 ghost" @click="replayVisible = false">确定</el-button>
                  </span>
             </div> -->
          </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import getPie3D from '../../utils/3DChart.js'
import shanDong from '../../utils/shandong.json'
import china from '../../utils/china.json'

import JessibucaDemo from '@/components/JessibucaDemo.vue'

import {  area_info,area_save,storage_list,storage_delete,storage_info,storage_save,hatch_list,hatch_save,hatch_delete } from '@/api/server'
import Pagination from '@/components/Pagination/index.vue'

import {
  data_today,
  warn_chart,
  device_map,
  area_list,
  storage_map,
  warning_list,
  storage_hatch,
  storage_percent,
  device_info
} from "@/api/bigdata";
import { playback_list } from '@/api/server'

import nodata from '@/components/nodata.vue'
import Header from './components/Header/index.vue'
import Video from '@/components/VideoDemo.vue'

export default {
  components:{
        nodata,Header,Video,JessibucaDemo,Pagination
    },
  data() {
    return {
      loading:false,
      markList:[],
      storage_list:[],
      storage_id:'',
      value1: ["2024-01", "2024-12"],
      lineChart: null,
      pie_data: {},
      line_data: {},
      data_time: {
        start: "2024-01",
        end: "2024-12",
      },
      num:{},
      device_map_data: {},
      map_all_data: {},
      warning_list: [],
      area_list:[],
      bg_img:'',
      storage_hatch:{},
      storage_hatch_num:{},
      storage_percent:{},
      storage_percent_num:{},
      replayVisible:false,
      value: '',
      device_list:[],
      dialogVisible: false,
      dialogInfo:{},
      showInfo:false,
      replayContent:'',
      backVisibleFrom:{
        start:'',
        end:'',
        hatch_code:'',
        visible:false,
        total:0,
        page:1,
        pageSize:20
      },
      backList:[],
      timeValue:''
    };
  },
  mounted() {
    data_today().then((res) => {
      this.pie_data = res;
      this.pieChartInit();
    });
    warn_chart(this.data_time).then((res) => {
      this.line_data = res;
      this.lineChartInit();
    });
    device_map().then((res) => {
      let result = res.list;
      let arr = result.bk.concat(result.cg);
      this.device_list = arr
      let obj = {};
       arr.forEach((e) => {
        this.$set(obj, e.title, [parseFloat(e.lat), parseFloat(e.lng)]);
      });
      this.map_all_data = obj;
      // res.num.bk = 0
      this.num = res.num
      this.loading=true
      let arr1 = result.bk.map((e) => {
        return { name: e.title, value: 1 };
      });
      let arr2 = result.cg.map((e) => {
        return { name: e.title, value: 1 };
      });
      this.device_map_data = [arr1, arr2];
      setTimeout(() => {
        this.mapChartInit();
      }, 1000);
    });
    warning_list().then((res) => {
      this.warning_list = res.data;
    });
    area_list().then(res=>{
        this.area_list = res
        if(this.area_list&&this.area_list.length>0){
            this.value = this.area_list[0].id
            this.bg_img = this.area_list[0].image_url
            this.getStorageList()
            storage_hatch({area_id:this.value}).then(res=>{
               this.storage_hatch = res
               this.storage_hatch_num = res.num
            })
        }
    })
    storage_percent().then(res=>{
        this.storage_percent =res
        this.storage_percent_num =res.num

    })
  },
  beforeDestroy() {
    if (!this.lineChart) {
      return;
    }
    this.lineChart.dispose();
    this.lineChart = null;
  },
  methods: {
    changeData(e){
      if(e && e.length == 2){
        this.backVisibleFrom.start = e[0]
        this.backVisibleFrom.end = e[1]
        playback_list(this.backVisibleFrom).then(res=>{
          this.backList = res.data
        })
      }else{
        this.backVisibleFrom.start = ''
        this.backVisibleFrom.end = ''
        playback_list(this.backVisibleFrom).then(res=>{
          this.backList = res.data
        })
      }
    },
    getList(){
      playback_list(this.backVisibleFrom).then(res=>{
        this.backVisibleFrom.visible = true
        this.backList = res.data
        this.backVisibleFrom.total = res.total
      })
    },
    hatchItem(item){
      this.backVisibleFrom.start = ''
      this.backVisibleFrom.end = ''
      this.timeValue = ''
      this.backVisibleFrom.hatch_code = item.code
      playback_list(this.backVisibleFrom).then(res=>{
        this.backVisibleFrom.visible = true
          this.backList = res.data
          this.backVisibleFrom.total = res.total
      })
    },
    changeArea(e){
      this.value = e
      let areaInfo = this.area_list.filter(item=>{
        return e == item.id
      })
      this.image_url = areaInfo.image_url
      this.storage_id = ''
      this.getStorageList()
      this.getHatchList()
    },
    getHatchList(){
      storage_hatch({area_id:this.value,storage_id:this.storage_id}).then(res=>{
         this.storage_hatch = res
          this.storage_hatch_num = res.num
      })
    },
    getStorageList(){
        let that = this
        storage_list({area_id:this.value}).then(res=>{
          this.storage_list = res
          let arr = []
          this.storage_list.forEach(e=>{
            // console.log(e.pos_x,e.pos_y)
            let obj = {}
            that.$set(obj,'x',e.pos_x)
            that.$set(obj,'y',e.pos_y)
            that.$set(obj,'w',e.width)
            that.$set(obj,'h',e.height)
            that.$set(obj,'is_polling',e.is_polling)
            that.$set(obj,'code',e.code)
            arr.push(obj) // 创建一个新对象并将其添加到数组中
          })
          this.markList = arr
          this.$nextTick(()=>{
            this.initCanvas(); // 画布初始化
          })
          this.getHatchList()

        })
      },
    drawStorage(cav, list, i) {
    /*
     *鼠标移动进行第一层判断, 区分情况: 无矩形, 已有矩形无选中, 已有选中矩形
     */
    let that = this
     cav.onmousedown = function(em) {
          let sX = em.offsetX; // 起点X坐标
          let sY = em.offsetY; // 起点Y坐标
          let iem = null
            console.log(sX, sY)
            // 判断鼠标位置
            list.forEach(function(value, index, array) {
                if (value.w > 0 && value.h > 0 && sX > value.x && sX < value.x + value.w && sY > value.y && sY < value.y + value.h) {
                    // 鼠标在右下方向生成的矩形中
                    iem = index;
                    // judgeDraw(cav, ctx, list, iem);
                    that.changeStorage(iem)

                }
                if (value.w < 0 && value.h > 0 && sX < value.x && sX > value.x + value.w && sY > value.y && sY < value.y + value.h) {
                    // 鼠标在左下方向生成的矩形中
                    iem = index;
                    // judgeDraw(cav, ctx, list, iem);
                    that.changeStorage(iem)

                }
                if (value.w > 0 && value.h < 0 && sX > value.x && sX < value.x + value.w && sY < value.y && sY > value.y + value.h) {
                    // 鼠标在右上方向生成的矩形中
                    iem = index;
                    // judgeDraw(cav, ctx, list, iem);
                    that.changeStorage(iem)

                }
                if (value.w < 0 && value.h < 0 && sX < value.x && sX > value.x + value.w && sY < value.y && sY > value.y + value.h) {
                    // 鼠标在左上方向生成的矩形中
                    iem = index;
                    // judgeDraw(cav, ctx, list, iem);
                    that.changeStorage(iem)

                }
            })
    }

    // console.log(cav, list, i);

    },

    initCanvas() {
      let that = this
      this.$nextTick(() => {
        // 初始化canvas宽高
        let cav = this.$refs.markCanvas;
        cav.width = '728';
        cav.height = '490';
        let ctx = cav.getContext('2d');
        ctx.strokeStyle = 'yellow'
        cav.style.cursor = 'pointer'

        // 计算使用变量
        let list = this.markList; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
        // 若服务端保存的为百分比则此处需计算实际座标, 直接使用实际座标可省略
        list.forEach(function (value, index, array) {
          let newValue = {
            x: value.x,
            y: value.y,
            w: value.w,
            h: value.h,
            code: value.code,
          }
          list.splice(index, 1, newValue)
        })

        // 若list长度不为0, 则显示已标记框
        if (list.length !== 0) {
          list.forEach(function (value, index, array) {
            // 遍历绘制所有标记框
            ctx.beginPath();
            ctx.ellipse(value.x + value.w / 2, value.y + value.h / 2, value.w / 2, value.h / 2, 0, 0, Math.PI * 2);
            ctx.lineWidth = 2;

            if(value.is_polling == 20){
              ctx.lineWidth = 2;
              ctx.strokeStyle = 'yellow';
              ctx.fillStyle = 'rgba(255, 255, 0, 0.3)';
              ctx.fill();
              ctx.fillStyle = "yellow";
              ctx.font = "15px Arial";
              ctx.fillText(value.code, value.x, value.y+value.h/2,);
            }else{
              ctx.lineWidth = 2;
              ctx.strokeStyle = 'green';
              ctx.fillStyle = 'rgba(0, 255, 0, 0.3)';
              ctx.fill();
              ctx.fillStyle = "green";
              ctx.font = "15px Arial";
              ctx.fillText(value.code, value.x, value.y+value.h/2,);
            }
            // ctx.arc(value.x, value.y, 4, 0, Math.PI * 2)

            // ctx.fillRect(value.x, value.y, value.w, value.h);
            ctx.stroke();
          });

        }
        this.drawStorage(cav,list)
        // 调用封装的绘制方法
        // draw(cav, list);

        // 备注: js中对象操作指向的是对象的物理地址, 获取绘制完矩形的结果数组直接取用或处理this.markList即可
      })
    },
    changeStorage(iem){
      let item = this.storage_list[iem]
      this.storage_id = item.id
      this.getHatchList()
    },
    gotoInfo(id){
        this.$router.push({path:'/bigdetail',query:{id:id}})
    },

    zqblur() {
      if (this.value1.length > 0) {
        this.data_time = { start: this.value1[0], end: this.value1[1] };
        warn_chart(this.data_time).then((res) => {
          this.line_data = res;
        });
      }
    },
    mapChartInit() {
    let data =  this.map_all_data
    let fir_arr = this.device_map_data[0]
    let sec_arr = this.device_map_data[1]

    let allArr = Object.values(this.map_all_data)
    let centerLocation = []
    if(allArr && allArr.length>0){
      centerLocation = allArr[allArr.length-1]
    }
    var geoCoordMap = data;
    let that = this
      // 将坐标与值对应并反映在地图上
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      //获取echart对象
      let dom = document.getElementById("demo");
      if (dom) {
        //初始化
        let myEchart = echarts.init(dom);
        //注册地图
        echarts.registerMap("中国", china);
        let option = {
          series: [
            {
              // tooltip: {
              //     trigger: 'item',
              // },
              name: "中国数据",
              type: "effectScatter",
              map: "中国", // 自定义扩展图表类型
              coordinateSystem: "geo",
              showLegendSymbol: true, // 存在legend时显示
              label: {
                // 文字
                // show: true,
                // color: '#fff',
                // fontSize: 10
              },
              itemStyle: {
                // 地图样式
                areaColor: "rgba(20, 112, 214,0.3)", //区域颜色
                // borderColor: '#ffffff',  //边框颜色
                // borderWidth: 1,
                color: "#f9f60e",
              },
              symbol: "circle",
              symbolSize: 10,
              emphasis: {
                // 鼠标移入时显示的默认样式
                // itemStyle: {
                //     areaColor: '#ffffff',
                //     borderColor: '#ffffff',
                //     borderWidth: 1
                // },
                // label: { // 文字
                //     show: true,
                //     color: '#fff',
                //     fontSize: 12,
                //     fontWeight: 600
                // },
              },
              data: convertData(fir_arr),
            },
            {
              // tooltip: {
              //     trigger: 'item',
              // },
              name: "中国数据",
              type: "effectScatter",
              map: "中国", // 自定义扩展图表类型
              coordinateSystem: "geo",
              showLegendSymbol: true, // 存在legend时显示
              label: {
                // 文字
                // show: true,
                // color: '#fff',
                // fontSize: 10
              },
              itemStyle: {
                // 地图样式
                areaColor: "rgba(20, 112, 214,0.3)", //区域颜色
                // borderColor: '#ffffff',  //边框颜色
                // borderWidth: 1,
                color: "#77b6b6",
              },
              symbol: "circle",
              symbolSize:10,
              emphasis: {
                // 鼠标移入时显示的默认样式
                // itemStyle: {
                //     areaColor: '#ffffff',
                //     borderColor: '#ffffff',
                //     borderWidth: 1
                // },
                // label: { // 文字
                //     show: true,
                //     color: '#fff',
                //     fontSize: 12,
                //     fontWeight: 600
                // },
              },
              data: convertData(sec_arr),
            },
          ],
          geo: {
            map: "中国",
            roam:true,
            zoom:10,
            center: centerLocation,
            label: {
              show: true,
              color: "#4fbfd7",
              emphasis: {
                show: true,
              },
            },

            itemStyle: {
              normal: {
                areaColor: "#141f51",
                borderWidth: 1.2, //设置外层边框
              },
              emphasis: {},
            },
          },
          tooltip: {
            triggerOn:"click",
            formatter: function (params) {
                if(params.color == "#f9f60e"){
                    that.goToDetail(params.name)
                    that.showInfo = false
                }else{
                    that.goToDetail(params.name)
                    that.showInfo = true
                }
            },
          },
        };
        myEchart.setOption(option);
        window.addEventListener("resize", function () {
          myEchart.resize();
        });
      }
    },
    pieChartInit() {
      const data = [
        { value: parseInt(this.pie_data.dh), name: "动火作业数" },
        // { value: 1, name: "常规站" },
        { value: parseInt(this.pie_data.xj), name: "巡检作业数" },
      ];
      const optionData = data.map((item) => {
        return {
          ...item,
          rate: item.value / 200,
        };
      });
      this.option = getPie3D(optionData, 0, "占比");

      const myChart = echarts.init(document.getElementById("pieChart"));
      myChart.resize({
        height: "300px",
      });
      myChart.setOption(this.option);
    },
    lineChartInit() {
      // let echarts = require('echarts');
      var lineChart = echarts.init(document.getElementById("lineChart"));
      const colors = ["#5470C6", "#91CC75", "#EE6666"];
      let option = {
        tooltip: {
          trigger: "axis",
        },
        color: colors,
        backgroundColor: "rgb(24, 38, 94)",
        legend: {
          data: ["数量"],
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                // 使用深浅的间隔色
                color: ["#aaa", "#ddd"],
              },
            },
            // prettier-ignore
            data: this.line_data.x_data,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位（个）",
            axisLabel: {
              formatter: "{value}",
              color: "#ffffff",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: ["rgba(255,255,255,0.1)"],
              },
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "line",
            yAxisIndex: 0,
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              color: "rgb(247, 205, 81)",
              width: 10,
              borderColor: "rgb(126, 244, 221)",
              borderWidth: 3,
            },
            lineStyle: {
              color: "rgb(126, 244, 221)",
              width: 3,
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + "个";
              },
            },
            itemStyle: {
              color: "#00f5f7",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  // 渐变颜色
                  {
                    offset: 0,
                    color: "rgba(0,245,247,0.80)",
                  },
                  {
                    offset: 1,
                    color: "rgba(85,111,253,0.00)",
                  },
                ],
                global: false,
              },
            },
            data: this.line_data.series,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      lineChart.setOption(option);
    },
    goToDetail(name,type){
        let item_arr = this.device_list.filter(e=>{
           return e.title == name
        })
        let item = item_arr[0]
        device_info({id:item.id}).then(res=>{
            this.dialogInfo = res
            this.dialogVisible = true
        })
    },
  },
};
</script>
<style lang="scss" scoped>
#app {   background-color: #080b1d !important;}
.bigdata {
  min-height: 100vh;
  position: relative;
  background-image: url("./static/bigdata/bg.png");
  background-position: 50% 50%;
  background-repeat: repeat;
  background-color: #080b1d;

.show_map { width: 70%; height: 100%; }
.map_size { height: calc(100vh - 100px); }
  .content {
    padding: 0;
    width: 100%;
    color: #fff;
    margin-top: -110px;
    .content_center {
      .cg {
        width: 839px;
        height: 460px;
      }
    }
    ::v-deep.el-input__inner { background: transparent !important; color: #ffffff; border-color: transparent; }
    .el-range-editor {
      background: transparent;
      border: none;
      width: 273px !important;
      padding: 0 !important;

      ::v-deep.el-input__icon {
        display: none;
      }

      //::v-deep.el-input__inner{ padding: 0 !important; }
      ::v-deep.el-range-input {
        background: transparent;
        width: 130px;
        color: #fff;
        text-align: left;
        padding-left: 28px;
      }

      ::v-deep.el-range-separator {
        color: #00f5f7;
        width: 20px;
        padding: 0;
      }
    }
  }
}

.bigdata_body {
  .rotate-180 {
    transform: rotate(90deg);
  }

  //.index_left { width:485px;}
  // .index_right { width:485px;}
  .box {
    margin: 8px;
    position: relative;

    //> .light { width:416px; height:23px; background:resolve('bigdata/box_bottom_light.png') no-repeat; position:absolute; left:50%; transform:translate(-50%,0); bottom:-10px;}
    .hd {
      font-size: 14px;
      color: #ffffff;
      font-weight: bolder;
      cursor: default;
      position: relative;
      //background:resolve('bigdata/box_titlebg.png') 0 0 / 100% 100% no-repeat; margin-bottom:8px;
      background: url("./static/bigdata/box_titlebg.png") 0 0 / 100% 100%
        no-repeat;
      margin-bottom: 8px;

      &::before {
        content: "";
        width: 173px;
        height: 75px;
        background: url("./static/bigdata/bottom_line.png") no-repeat;
        position: absolute;
        top: 7px;
      }

      .time {
        width: 111px;
        height: 36px;
        background: url("./static/bigdata/sel_time.png") 0 0 / 100% 100%
          no-repeat;
      }

      .line {
        height: 1px;
        background: #00f5f7;
      }

      .ico {
        margin-right: 3px;
      }

      .title {
        display: inline-block;
        position: relative;
      }

      .block {
        position: absolute;
        width: 278px;
        height: 36px;
        right: 35px;
        top: 6px;
        ::v-deep.el-select__caret { color: transparent; }
      }
    }

    .bd {
      color: #ffffff;
      font-size: 16px;
      background: linear-gradient(
        0deg,
        rgba(46, 64, 157, 0.4),
        rgba(46, 64, 157, 0)
      );
      position: relative;
      top: 0px;

      &::before,
      &::after {
        content: "";
        display: block;
        width: 1px;
        height: 151px;
        background: url("./static/bigdata/box_line.png") no-repeat;
        position: absolute;
        top: 50%;
        transform: translate(0, -75px);
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    &.detailBox {
      > .hd {
        padding: 0 15px;

        .title {
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

.today_item {
  margin: 10px 20px;
  font-size: 14px;
}

.four {
  background: linear-gradient(
    to right,
    rgb(20, 112, 214, 0.3),
    rgb(20, 46, 121, 0.4)
  );
  width: 100%;
  height: 45px;
  margin-bottom: 10px;
  position: relative;

  .four_item {
    width: 100%;
    height: 100%;
    font-size: 24px;
    font-weight: bold;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgb(20, 112, 214);
    }

    &::before {
      top: 0;
      left: 0;
    }

    &::after {
      bottom: 0;
      right: 0;
    }
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgb(20, 112, 214);
  }

  &::before {
    top: 0;
    right: 0;
  }

  &::after {
    bottom: 0;
    left: 0;
  }
}

.ck {
  padding: 0 20px;
  //max-height: 450px;
  height:calc(100vh - 580px);
  overflow-x: hidden;
  /* 隐藏y轴滚动条 */
  margin-right: -50px;
  /* Maximum width of scrollbar */
  padding-right: 50px;
  /* Maximum width of scrollbar */
  overflow-y: scroll;

  .ck_top {
    background: url("./static/bigdata/num_bg.png") 0 bottom / 100% 100%
      no-repeat;
    height: 50px;

    .ck_img {
      width: 63px;
      height: 18px;
    }

    .ck_num {
      font-size: 24px;
      font-weight: bold;
        padding-left: 10px;
    }
  }

  .ck_content {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #f9f60e;

    //.ck_bg1 { background: url('./static/bigdata/bg_total.png') 0 0 / 100% auto no-repeat; width: 100%; min-height: 120px; }
    .ck_bg1 {
      position: relative;
      cursor: pointer;
      .img_num {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.zq_content {
  padding: 10px 20px;
  ::v-deep.el-progress__text {
    color: #f9f60e;
    font-size: 24px !important;
  }
  .zq_list {
    padding-left: 30px;
    margin-top: 37px;
    .zq_item {
      .look_num {
        background: url("./static/bigdata/look_bg.png") 0 bottom / 100% 100%
          no-repeat;
        height: 48px;
        width: 98px;
        font-size: 20px;
        font-weight: bold;
        color: #f9f60e;
      }
    }
  }
}

.warn_list {
  padding: 0 20px;
  //max-height: 400px;
  height: calc(100vh - 782px);
  overflow-x: hidden;
  margin-right: -50px;
  /* Maximum width of scrollbar */
  padding-right: 50px;
  /* Maximum width of scrollbar */
  overflow-y: scroll;

  .warn_item {
    padding: 15px 0;
    border-bottom: 1px solid #77b6b6;

    .warn_title {
      font-size: 14px;
      padding-bottom: 15px;
    }

    .warn_des,
    .warn_time {
      font-size: 12px;
    }

    .warn_state {
      width: 50px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      background: #cfa72f;
      border-radius: 4px;
      margin-top: 10px;
    }
  }
}

#lintChart {
  ::v-deep div {
    bottom: -20px;
  }
}
.sd_map {
  height: calc(100vh - 590px);
  position: relative;
  .echart-demo {
    //top: -80px;
    background-image: url("./static/bigdata/mp_bg.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
  }
  .map_num { position: absolute; bottom: 50px; left: 20px; width: 100px; height: 60px; }
}
#pieChart {
  ::v-deep canvas {
    height: 160px !important;
  }
}
.dh {
  color: #f9f60e;
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 5px;
}
.comDialog{

    ::v-deep.el-pagination__jump { display: none; }
    ::v-deep.el-pagination__total { color: #fff; }
    ::v-deep.el-dialog__header { display: none; }
    ::v-deep .el-dialog{ background: transparent;
        .content { border-radius: 3px;background: rgb(50, 86, 198,1);  border: 1px solid rgb(50, 86, 198);
            .header { padding: 10px 0;border-bottom:1px solid #ffffff;
                .title { font-size: 24px; color: #ffffff;
                    &::before { content: ''; width: 4px; height: 19px; background:#ffffff; display: inline-block; margin-right: 10px ; }
                }
            }
            .body { padding: 20px;
                .b_content { color: #ffffff; padding-bottom: 20px;
                    .item { padding-bottom: 10px }
                    .name { font-size: 18px; font-weight: bold; }
                }
                .dialog-footer { width: 80%; }
            }
            &::before {
                content: '';
                display: block;
                width: 412px;
                height: 29px;
                background: url('./static/bigdata/line_top.png') no-repeat;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            };
            &::after {
                content: '';
                display: block;
                width: 412px;
                height: 29px;
                background: url('./static/bigdata/line_bott.png') no-repeat;
                position: absolute;
                left: 50%;
                transform: translate(-50%,-100%);
            }
            .backBody{ width: 100%; color: #ffffff; max-height: 500px; overflow-y: auto; box-sizing: border-box;
              .backItem { padding: 10px 0; border-bottom: 1px solid #cccccc;font-size: 16px; line-height: 30px; }
            }
        }
    }
}
.cont {
  position: relative;

  img {
    z-index: 9;
  }

  canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}
.no_data { height: calc(100vh - 195px); }
</style>
